<template>
  <div class="search-page">
    <form action="/">
      <van-search v-model="value" placeholder="请输入搜索关键词" show-action shape="round" @input="input">
        <template #left>
          <van-icon name="arrow-left" @click="$router.back()" />
        </template>
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </form>
    <van-cell  @click="getRes(item)" :title="item" icon="search" v-for="(item , index) in suggestionList" :key="index"/>
  </div>
</template>

<script>
import { suggestion } from '@/api/search'
import to from 'await-to-js'
export default {
  name: 'SearchPage',
  data () {
    return {
      value: '',
      suggestionList: []
    }
  },
  methods: {
    async input () {
      if (this.value === '') return
      const [, res] = await to(suggestion({ q: this.value }))
      console.log(res)
      if (res.data.data.options.length === 0) return
      if (res.data.data.options[0] === null) return
      this.suggestionList = res.data.data.options
    },
    onSearch () {},
    async getRes (q) {

    }
  }
}
</script>

<style scoped lang="less">
</style>
